.sc-calendar {
  width: 500px;
  height: 581px;
  text-align: center;
  font-family: "Microsoft Yahei";
  color: #4A4A4A;
  box-shadow: 2px 4px 5px #bdbdbd;
  border-width: 1px 0 0 1px;
  border-color: #E6E4E0;
  border-style: solid;
  float: left;
  margin-right: 20px;
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
  -webkit-text-size-adjust: none;
  font-size: 16px;

  .sc-header {
    height: 7%;
    border-bottom: 0;
    background-color: #fafafa;

    .sc-actions {
      float: left;
      width: 20%;
      padding: 5px;
      height: 100%;
      box-sizing: border-box;

      div {
        display: inline-block;
        /*border: 1px solid #ccc;*/
        vertical-align: bottom;
        width: 20px;
        padding-bottom: 5px;
        font-size: 1.5em;
        line-height: 0.9em;
      }

      .sc-return-today {
        display: block;
        background-color: #F5F5F9;
        border-radius: 2px;
        /* border: 1px solid #ccc; */
        width: 60px;
        font-size: 0.8em;
        padding: 0.3em;
        margin: auto;
      }

      .sc-time {
        display: block;
        margin-top: 3px;
        font-size: 0.8em;
      }

      select {
        border-color: rgba(0, 0, 0, 0);
        padding: 0.2em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-family: "Microsoft Yahei";
        color: #606060;
        font-size: 13px;
        height: 26px;
        cursor: pointer;
        width: 60px;
      }

      input {
        border-color: rgba(0, 0, 0, 0);
        padding: 0.2em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-family: "Microsoft Yahei";
        color: #606060;
      }

      .sc-mleft, .sc-mright, .sc-yleft, .sc-yright {
        cursor: pointer;
      }

      .sc-return-today {
        cursor: pointer;
      }
    }

    .sc-actions:last-child {
      float: right;
    }

    .sc-actions-big {
      width: 50%;
    }

    @media screen and (max-width: 500px) {
      .sc-actions {
        width: 50%;
      }
    }

  }

  .sc-body {
    height: 93%;
    clear: both;
    box-shadow: 2px 4px 5px #bdbdbd;

    .sc-week {
      height: 12%;
      font-weight: 400;
      font-size: 20px;
      color: #4A4A4A;

      .sc-week-item {
        height: 100%;
        padding-top: 2%;
        float: left;
        width: 14.285%;
        background-color: #FBEC9C;
        border-width: 1px 0 1px 1px;
        border-color: #ECE3B1;
        border-style: solid;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sc-week-item:nth-child(7n), .sc-week-item:nth-child(7n+6) {
        color: rgba(224, 8, 8, 0.74) !important;
      }
    }

    /****************************************************************************/
    .sc-days {
      height: 88%;

      .sc-item {
        height: 16.67%;
        float: left;
        font-weight: 600;
        color: #565555;
        width: 14.285%;
        padding-top: 10px;
        background-color: #ffffff;
        border-width: 0 0 1px 1px;
        border-color: #F1EBE4;
        border-style: solid;
        box-sizing: border-box;

        .day {
          font-size: 1.5em;
        }

        .lunar-day {
          font-size: 10px;
          font-weight: normal;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .money {
          font-size: 10px;
          position: relative;
          top: -3px;
          right: 0px;
          color: orange;
          float: right;
          padding-right: 6px;
          padding-bottom: 2px;
        }
      }

      .sc-item:nth-child(7n) .day, .sc-item:nth-child(7n+6) .day {
        color: rgba(224, 8, 8, 0.74);
      }

      .sc-today {
        background-color: orange !important;
        color: white;
        border: 1px solid orange;

        .day {
          color: white;
        }

        .money {
          font-size: 10px;
          position: relative;
          top: -3px;
          right: 0px;
          color: orange;
          float: right;
          padding-right: 6px;
          padding-bottom: 2px;
          color: white;
        }

        .lunar-day {
          color: #FFF!important;
        }
      }

      .sc-active-day, .sc-selected {
        border: 1px solid orange !important;
      }

      .sc-vocation {
        background-color: #FFEBEC;
      }
      .sc-mark {
        background-color: #E5FBFA;
      }
      .sc-vocation:before {
        content: '休';
        display: block;
        position: absolute;
        font-size: 0.7em;
        width: 1.2em;
        font-weight: 100;
        color: white;
        background-color: #E00808;
        margin-top: -10px;
      }

      .sc-othermenth {
        color: #C1C0C0 !important;

        .day, .lunar-day {
          color: #C1C0C0 !important;
        }
      }

      .sc-festival {
        .lunar-day {
          color: #E00808;
        }
      }
    }

    /***************************************************/
    .sc-months {
      height: 89.6%;
      border-top: 1px solid #F1EBE4;

      .sc-month-item {
        height: 37.1%;
        float: left;
        font-weight: 600;
        color: #565555;
        width: 25%;
        padding-top: 10px;
        background-color: #ffffff;
        border-width: 0 0 1px 1px;
        border-color: #F1EBE4;
        border-style: solid;
        box-sizing: border-box;

        .month {
          line-height: 100px;
          font-family: "Microsoft Yahei";
          font-size: 18px;
          /* color: orange; */
          position: relative;
          right: 80px;
          top: 10px;
          text-align: right;
        }

        .money-total {
          position: relative;
          top: -15px;
          right: 80px;
          text-align: right;
          font-size: 12px;
        }

        .money-list {
          font-size: 12px;
          text-align: left;
          display: none;

          span {
            display: block;
            position: relative;
            top: 0px;
            right: -10px;
          }
        }
      }

      .sc-month-mark {
        background-color: #E5FBFA !important;
      }

      .cur-month {
        background-color: orange !important;
        color: white;
        border: 1px solid orange;
      }

      .sc-active-month, .sc-month-selected {
        border: 1px solid orange !important;
      }

    }

  }
}